/*
 * Copyright 2022 Nightingale Team
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */
import React from 'react';
import { Form, Radio, Row, Col, Select, Input, InputNumber } from 'antd';
import _ from 'lodash';
import { Trans, useTranslation } from 'react-i18next';
import { Panel } from '../../Components/Collapse';

export default function index() {
  const { t } = useTranslation('dashboard');
  const namePrefix = ['options', 'legend'];
  const tableColumn = ['max', 'min', 'avg', 'sum', 'last'];

  return (
    <Panel header='Legend' data-oid='8j8ywp5'>
      <Row gutter={10} data-oid='ck3kg3.'>
        <Col span={9} data-oid='bx8tjgx'>
          <Form.Item label={t('panel.options.legend.displayMode.label')} name={[...namePrefix, 'displayMode']} data-oid='q25s1fy'>
            <Radio.Group buttonStyle='solid' data-oid='j2lt8:t'>
              <Radio.Button value='table' data-oid='gt-7oth'>
                {t('panel.options.legend.displayMode.table')}
              </Radio.Button>
              <Radio.Button value='list' data-oid='hq47ki1'>
                {t('panel.options.legend.displayMode.list')}
              </Radio.Button>
              <Radio.Button value='hidden' data-oid='qqn95be'>
                {t('panel.options.legend.displayMode.hidden')}
              </Radio.Button>
            </Radio.Group>
          </Form.Item>
        </Col>
        <Form.Item
          noStyle
          shouldUpdate={(prevValues, curValues) => _.get(prevValues, [...namePrefix, 'displayMode']) !== _.get(curValues, [...namePrefix, 'displayMode'])}
          data-oid='k69wgen'
        >
          {({ getFieldValue }) => {
            const displayMode = getFieldValue([...namePrefix, 'displayMode']);
            return (
              <>
                <Col span={8} data-oid='cz_4xlf'>
                  <Form.Item
                    label={t('panel.options.legend.heightInPercentage')}
                    name={[...namePrefix, 'heightInPercentage']}
                    tooltip={t('panel.options.legend.heightInPercentage_tip')}
                    initialValue={30}
                    data-oid='rh5:afd'
                  >
                    <InputNumber min={20} max={80} style={{ width: '100%' }} data-oid='egfeynu' />
                  </Form.Item>
                </Col>
                <Col
                  span={7}
                  style={{
                    display: displayMode === 'list' ? 'block' : 'none',
                  }}
                  data-oid='6o7v7f2'
                >
                  <Form.Item label={t('panel.options.legend.placement')} name={[...namePrefix, 'placement']} initialValue='bottom' data-oid='vva58h6'>
                    <Radio.Group buttonStyle='solid' data-oid='pj:eaxa'>
                      <Radio.Button value='bottom' data-oid='unhem3x'>
                        Bottom
                      </Radio.Button>
                      <Radio.Button value='right' data-oid='emiqwlz'>
                        Right
                      </Radio.Button>
                    </Radio.Group>
                  </Form.Item>
                </Col>
              </>
            );
          }}
        </Form.Item>
        <Col span={24} data-oid='a_xovo5'>
          <Form.Item label={t('panel.options.legend.columns')} name={[...namePrefix, 'columns']} data-oid='fox:d7d'>
            <Select mode='multiple' data-oid='rb4vkkm'>
              {_.map(tableColumn, (item) => {
                return (
                  <Select.Option key={item} value={item} data-oid='k:nwn9g'>
                    {t(`panel.options.legend.${item}`)}
                  </Select.Option>
                );
              })}
            </Select>
          </Form.Item>
        </Col>
        <Col span={12} data-oid='tuqf-gt'>
          <Form.Item label={t('panel.options.legend.behaviour.label')} name={[...namePrefix, 'behaviour']} initialValue='showItem' data-oid='_zmaitb'>
            <Select
              options={[
                {
                  label: t('panel.options.legend.behaviour.showItem'),
                  value: 'showItem',
                },
                {
                  label: t('panel.options.legend.behaviour.hideItem'),
                  value: 'hideItem',
                },
              ]}
              data-oid=':w3xvt.'
            />
          </Form.Item>
        </Col>
        <Col span={12} data-oid='48qtqrq'>
          <Form.Item label={t('panel.options.legend.selectMode.label')} name={[...namePrefix, 'selectMode']} initialValue='single' data-oid='t_.aaup'>
            <Select
              options={[
                {
                  label: t('panel.options.legend.selectMode.single'),
                  value: 'single',
                },
                {
                  label: t('panel.options.legend.selectMode.multiple'),
                  value: 'multiple',
                },
              ]}
              data-oid='bianuvp'
            />
          </Form.Item>
        </Col>
        <Col span={9} data-oid='6aah00.'>
          <Form.Item label={t('panel.custom.detailName')} name={[...namePrefix, 'detailName']} data-oid='dyqa.53'>
            <Input style={{ width: '100%' }} data-oid='cntwol-' />
          </Form.Item>
        </Col>
        <Col span={15} data-oid='6xwr898'>
          <Form.Item
            label={t('panel.custom.detailUrl')}
            name={[...namePrefix, 'detailUrl']}
            tooltip={{
              overlayInnerStyle: { width: 330 },
              title: <Trans ns='dashboard' i18nKey='dashboard:var.help_tip' components={{ 1: <br data-oid='a1d_1j.' /> }} data-oid='fqvnw_b' />,
            }}
            data-oid='9-r::cb'
          >
            <Input style={{ width: '100%' }} data-oid='8ep6blx' />
          </Form.Item>
        </Col>
      </Row>
    </Panel>
  );
}
